<template>
  <span class="lineOrderStatus">
    <a-tag :color="color">
      <template v-if="data.auditLineOrder">
        <DescriptionsSplit
          v-if="split"
          :text="
            $getEnum(
              orderLineDict.auditStatus,
              data.auditLineOrder && data.auditLineOrder.lineOrderAuditState
            )
          "
        />
        <span v-else
          >{{
            $getEnum(
              orderLineDict.auditStatus,
              data.auditLineOrder && data.auditLineOrder.lineOrderAuditState
            )
          }}
        </span>
      </template>
      <template v-else>
        待生成合同
      </template>
    </a-tag>
  </span>
</template>

<script>
import orderLineDict from "@/dict/order-line";

const DescriptionsSplit = {
  template: `
    <div>
      <div>{{desc[0]}}</div>
    </div>
  `,
  props: {
    text: {
      type: String
    }
  },
  computed: {
    desc() {
      return this.text.split("-");
    }
  }
};

export default {
  props: {
    data: {
      type: Object
    },
    // 订单状态是否拆分做换行显示
    split: {
      type: Boolean,
      default: false
    }
  },
  components: {
    DescriptionsSplit: DescriptionsSplit
  },
  computed: {
    // 颜色
    color() {
      let res;
      if (this.data.auditLineOrder) {
        let colors = {
          orange: [orderLineDict.auditStatus.normal.value],
          red: [
            orderLineDict.auditStatus.modifyGoods.value,
            orderLineDict.auditStatus.modifyPremium.value,
            orderLineDict.auditStatus.modifyBasePrice.value,
            orderLineDict.auditStatus.modifyFirmPrice.value
          ]
        };
        // 查找当前订单状态对应的颜色
        for (const key in colors) {
          if (
            colors[key].indexOf(
              this.data.auditLineOrder &&
                this.data.auditLineOrder.lineOrderAuditState
            ) !== -1
          ) {
            res = key;
          }
        }
      } else {
        res = "orange";
      }
      return res;
    }
  },
  data() {
    return {
      orderLineDict
    };
  }
};
</script>

<style lang="scss" scoped>
.lineOrderStatus {
  .ant-tag {
    font-size: 14px !important;
    line-height: 24px !important;
  }
}
</style>
